<template>
	<view class="order">
		<view class="uni-flex">
			<view class="flex-item" :class="{ active: active == 1 }" @click="cut(1)"><text>正价订单</text></view>
			<view class="flex-item" :class="{ active: active == 2 }" @click="cut(2)"><text>代理商活动</text></view>
			<view class="flex-item" :class="{ active: active == 3 }" @click="cut(3)"><text>秒杀活动</text></view>
			<view class="flex-item" @click="cuttype()"><text v-show="type==1">金额</text><text v-show="type==2">数量</text></view>
		</view>
		<view class="find">
			<div class='time'>
				<div class='kuang' @click='$refs.picker.show()'>
					<image src="../../../static/img/calendar.png"></image>
					<span>{{rangeVal[0]}}到{{rangeVal[1]}}</span>
				</div>
			</div>
			<!-- <view class="time">
				<picker mode="date" :value="date" start="2000-01-01" :end="endDate" @change="bindDateChange">
					<view class="uni-input" v-show="date">{{ date }}</view>
					<view class="uni-placeholder" v-show="!date">请选择下单时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="icon"></image>
			</view>
			<view class="name">
				<input type="text" value="" />
				<image src="/static/img/find_1.png" class="icon"></image>
			</view> -->
		</view>
		<view class="table">
			<view class="th">
				<view class="tr">姓名</view>
				<view class="tr">销售数量</view>
				<view class="tr">断货订单</view>
				<view class="tr">取消订单</view>
				<view class="tr">退货订单</view>
				<view class="tr">实际销售数量</view>
				<view class="tr">退货比</view>
			</view>
			<view class="td" v-for="(item,index) in datelist" v-if="type==1">
				<view class="tb">{{item.name}}</view>
				<view class="tb">{{item.salesCnt}}</view>
				<view class="tb">{{item.outOfStockCnt}}</view>
				<view class="tb">{{item.cancelCnt}}</view>
				<view class="tb">{{item.returnCnt}}</view>
				<view class="tb">{{item.realCnt}}</view>
				<view class="tb">{{item.returnRate}}</view>
			</view>
			<view class="td" v-for="(item,index) in datelist" v-else>
				<view class="tb">{{item.name}}</view>
				<view class="tb">{{item.salesSum}}</view>
				<view class="tb">{{item.outOfStockSum}}</view>
				<view class="tb">{{item.cancelSum}}</view>
				<view class="tb">{{item.returnSum}}</view>
				<view class="tb">{{item.realSum}}</view>
				<view class="tb">{{item.returnRate}}</view>
			</view>
		</view>
		<view v-if="datelist.length==0" class="notavailable">
			<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
		<view class="pagination" v-else>
			<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
				<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
				上一页
			</view>
			<view class="center">{{ paging.page }}/{{ paging.total }}</view>
			<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
				下一页
				<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
			</view>
		</view>
		<view class="go-top" v-show="is_go_top" @click="backTop">
			<image src="/static/img/go_top.png" />
		</view>
		<w-picker :visible.sync="visible" mode="range" startYear="2017" endYear="2029" :value="rangeVal" 
		 fields="day" @confirm="onConfirm($event,'date')" @cancel="onCancel" :disabled-after="false" ref="picker"></w-picker>
	</view>
</template>

<script>
	import {
		uniIcons
	} from '@dcloudio/uni-ui';
	import wPicker from "@/components/w-picker/w-picker.vue";
	import performance from '../../../servers/agent/statement/performance.js';
	export default {
		components: {
			uniIcons,
			wPicker
		},
		data() {
			return {
				active: 1,
				dataList: [1],
				paging: {
					page: 1,
					total: 1
				},
				is_go_top: false,
				date: null,
				datelist: [],
				
				endDate: null,
				titlelist: ['退货', '断货', '取消'],
				type: 1,
				visible: [],
				rangeVal: []
			};
		},
		onPageScroll: function(e) {
			//nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) {
				this.is_go_top = true;
			} else {
				this.is_go_top = false;
			}
		},
		mounted() {
			// this.endDate = this._endDate();
			var d = new Date();
			var d1 = new Date(d.getTime() - 30 * 86400000)
			this.rangeVal = [
				this.formatDate(d1),
				this.formatDate(d)
			]
			this.getdata()
		},
		methods: {
			getdata() {
				var obj = {
					startTime: this.rangeVal[0],
					endTime: this.rangeVal[1],
					orderType: this.active,
					currentPage: this.paging.page,
					pageSize: 10
				};
				performance.achievement(obj)
					.then(res => {
						if (res.code == 200) {
							this.datelist = res.data.records
							this.paging.total = res.data.pages || 1
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
						uni.hideLoading();
					})
					.catch(err => {

						console.log(new Error('请检查网络后重试'));
					});
			},
			onConfirm(e) {
				this.rangeVal = [
					e.from,
					e.to
				]
				this.getdata()
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			cuttype() {
				if (this.type == 1) {
					this.type = 2
				} else {
					this.type = 1
				}
			},
			cut(e) {
				this.active = e;
				this.getdata()
			},
			find() {
				uni.navigateTo({
					url: '../order/orderfind'
				});
			},
			next() {
				if (this.paging.page < this.paging.total) {
					this.paging.page += 1;
				}
			},
			prev() {
				if (this.paging.page > 1) {
					this.paging.page -= 1;
				}
			},
			bindDateChange(e) {
				this.date = e.target.value;
			},
			getTextByJs(e) {
			      var _str = ""; 
			      for(var o in e){ 
			      if(e[o] != -1){ 
			      _str += o + "=" + e[o] + "&"; 
			      } 
			      } 
			      var _str = _str.substring(0, _str.length-1); 
			      return _str; 
			 },
			_endDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				return year + '-' + month + '-' + day;
			},
			// 计算距离顶部的高度，均分10等分，
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			formatDate(date) {
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				return YY + MM + DD;
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		background: #ffffff;
	}

	.order {
		padding: 1rpx 0;

		.uni-flex {
			position: fixed;
			z-index: 1;
			top: 44px;
			// #ifdef APP-PLUS
			top: 0;
			// #endif
			width: 100%;
			display: flex;
			flex-direction: row;
			box-shadow: 5rpx 0px 20rpx #c5c5c5;

			.flex-item {
				font-size: 28rpx;
				font-weight: 900;
				width: 50%;
				height: 89rpx;
				text-align: center;
				line-height: 89rpx;
				background: #ffffff;
			}

			.flex-item.active {
				text {
					color: #bd3c8c;
					border-bottom: 3rpx solid #bd3c8c;
				}
			}
		}

		.find {
			margin-top: 100rpx;
			padding: 20rpx;

			.time,
			.name {
				position: relative;
				border-radius: 5rpx;
				padding: 20rpx;
				border: 1px solid #d3d3d3;
				margin-bottom: 20rpx;

				.kuang {
					font-size: 30rpx;

					image {
						position: relative;
						top: 2rpx;
						width: 36rpx;
						height: 34rpx;
						margin-right: 20rpx;
					}
				}

				.search {
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					padding: 20rpx;
				}
			}
		}

		// .find {
		// 	margin-top: 100rpx;
		// 	display: flex;
		// 	flex-direction: row;
		// 	.time,
		// 	.name {
		// 		position: relative;
		// 		width: 49%;
		// 		padding: 0 20rpx;
		// 		picker,
		// 		input {
		// 			font-size: 26rpx;
		// 			width: 100%;
		// 			height: 90rpx;
		// 			line-height: 90rpx;
		// 			border: 1px solid #e1e1e1;
		// 			border-radius: 10rpx;
		// 			padding: 0 27rpx;
		// 			box-sizing: border-box;
		// 			margin: 15rpx 0;
		// 			background: #ffffff;
		// 			.uni-placeholder {
		// 				color: #999999;
		// 			}
		// 		}
		// 		.icon {
		// 			position: absolute;
		// 			right: 40rpx;
		// 			top: 45rpx;
		// 			width: 36rpx;
		// 			height: 34rpx;
		// 			line-height: 90rpx;
		// 			text-align: center;
		// 			pointer-events: none;
		// 		}
		// 	}
		// }
		.table {
			margin-top: 50rpx;

			.th,
			.td {
				display: flex;
				flex-direction: row;
				line-height: 94rpx;

				.tr,
				.tb {
					word-break: break-all;
					width: 14.28%;
					text-align: center;
					font-size: 26rpx;
					padding: 0 10rpx;
					border-left: 1px solid #fff;
					box-sizing: border-box;

				}

				.tr:nth-child(1),
				.tb:nth-child(1) {
					border-left: none;
				}

				.tr:nth-child(n+2) {
					line-height: 47rpx;
				}

				.tr:nth-last-child(1) {
					line-height: 94rpx;
				}
			}

			.th {
				background: #f4f4f4;
			}

			.td {
				border-bottom: 1px solid #e1e1e1;
			}
		}
	}
</style>
